<template>
  <div style="padding: 0px 20px">
    <el-row type="flex" justify="left">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="formInline.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click=goAdd()>新增</el-button>
        </el-form-item>
      </el-form>
    </el-row>
<!--    <el-row type="flex" justify="left">-->
<!--      <el-button @click=goAdd()>新增</el-button>-->
<!--    </el-row>-->
    <el-row>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            type="index"
            label="序号"
            :index="(index)=>{return index + (page.current -1 )* page.size + 1}"
            width="50">
        </el-table-column>
        <el-table-column
            label="名称"
            prop="name">
        </el-table-column>
        <el-table-column
            label="描述"
            prop="desc">
        </el-table-column>
        <el-table-column
            label="描述"
            prop="desc">
        </el-table-column>
        <el-table-column
            label="录入时间"
            prop="inputTime">
        </el-table-column>
        <el-table-column
            label="录入人"
            prop="inputPeople">
        </el-table-column>
        <el-table-column
            label="备注"
            prop="remark">
        </el-table-column>
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="formInline.name"
                size="mini"
                placeholder="输入关键字搜索"
                @keyup="getList"
            />
          </template>
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="goUpdate(scope.$index, scope.row)">Edit
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="del(scope.$index, scope.row)">Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-pagination
        style="display: flex;justify-content: flex-end"
        background
        layout="sizes,prev, pager, next"
        :total.sync="page.total"
        :current-page.sync="page.current"
        :page-size.sync="page.size"
        @current-change="getList"
        @size-change="getList"
        >
    </el-pagination>
    <el-dialog title="新增/修改" :visible.sync="dialogFormVisible">
      <el-form :model="reForm" label-width="100px">
        <el-input v-model="reForm.id" autocomplete="off" v-show="false"></el-input>
        <el-form-item label="名称" >
          <el-input v-model="reForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" >
          <el-input v-model="reForm.desc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="录入时间" >
          <el-date-picker
              v-model="reForm.inputTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="录入人" >
          <el-input v-model="reForm.inputPeople" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" >
          <el-input v-model="reForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import request from "@/utils/request";

// import axios from 'axios';

import {add, del, getList} from "@/api/api";

export default {
  name: "Home",
  data() {
    return {
      formInline:{

      },
      reForm:{

      },
      tableData:[],
      page:{
        total:0,
        size:10,
        current:1,
      },
      dialogFormVisible:false,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      getList({...this.formInline},"toolType/list").then(res=>{
        console.log(res)
        if(res.msg == "success"){
          this.page.total = res.records.length;
          console.log((this.page.current -1)*this.page.current)
          console.log(this.page.size + (this.page.size * (this.page.current -1)))
          this.tableData = res.records.slice((this.page.current -1)*this.page.size ,this.page.size + (this.page.size * (this.page.current -1)));
          console.log(this.tableData)
        }else{
          this.tableData = []
          this.page.total = 0
        }
      })
    },
    goAdd(){
      this.reForm = {
        inputPerson:this.$store.state.user.name
      }
      this.dialogFormVisible=true
    },
    goUpdate(index,row){
      this.reForm = row;
      this.dialogFormVisible = true
    },
    submit(){
      if(this.reForm.id){
        add(this.reForm,"toolType/update").then(res=>{
          if(res == "success"){
            this.$message.success("success")
            this.dialogFormVisible = false;
            this.getList()
          }else {
            this.$message.error("error")
          }

        })
      }else {
        add(this.reForm,"toolType/add").then(res=>{
          if(res == "success"){
            this.$message.success("success")
            this.dialogFormVisible = false;
            this.getList()
          }else {
            this.$message.error("error")
          }

        })
      }

    },
    del(index,row){
      del(row,"toolType/del").then(res=>{
        if(res == "success"){
          this.$message.success("success")
          this.getList();
        }else {
          this.$message.error("error")
        }
      })

    },

  }
}
</script>

<style scoped></style>
